<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cart"></i> 产品管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span @click="goBack"
                class="go-back">秒杀管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{goods_id==''?'添加秒杀':'编辑秒杀'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs type="card"
               v-model="tabIndexName"
               @tab-click="handleClick">
        <el-tab-pane label="基本属性"
                     :lazy="true"
                     name="info">
          <el-form ref="infoForm"
                   :model="datas.info"
                   prop="infoForm"
                   :rules="rules.info"
                   label-width="90px">
            <el-form-item label="商品名称"
                          prop="name"
                          class="form-item">
              <el-input v-model="datas.info.name"
                        maxlength="50"
                        minlength="1"
                        placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品描述"
                          class="form-item">
              <textarea style="width:88%;border: 1px solid #DCDFE6;resize:none;color:#606266;padding:15px;margin-right:90px;"
                        placeholder="请输入商品描述(200字以内)..."
                        maxlength="200"
                        rows="5"
                        name="describe"
                        v-model="datas.info.describe"></textarea>
            </el-form-item>
            <el-form-item label="商品编号"
                          class="form-item">
              <el-input v-model="datas.info.goods_no"
                        maxlength="12"
                        minlength="1"
                        placeholder="默认系统自动生成"></el-input>
            </el-form-item>
            <el-form-item label="秒杀时间"
                          class="form-item">
              <el-date-picker v-model="date_time"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              type="datetimerange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="佣金方式"
                          prop="brokerage_type">
              <el-select v-model="datas.info.brokerage_type"
                         placeholder="请选择佣金方式">
                <el-option key="1"
                           label="比例"
                           value="1"></el-option>
                <el-option key="2"
                           label="固定"
                           value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="一级佣金"
                          prop="stair_money"
                          class="form-item">
              <div class="standard">
                <el-input v-model="datas.info.stair_money"
                          maxlength="11"
                          type="number"
                          min="1"
                          minlength="1"
                          :placeholder="datas.info.brokerage_type==1?'请输入一级佣金比例':'请输入一级佣金'"></el-input>
                <span v-if="datas.info.brokerage_type==1">%</span>
              </div>
            </el-form-item>
            <el-form-item label="二级佣金"
                          prop="second_money"
                          class="form-item">
              <div class="standard">
                <el-input v-model="datas.info.second_money"
                          maxlength="11"
                          type="number"
                          min="1"
                          minlength="1"
                          :placeholder="datas.info.brokerage_type==1?'请输入二级佣金比例':'请输入二级佣金'"></el-input>
                <span v-if="datas.info.brokerage_type==1">%</span>
              </div>
            </el-form-item>
            <el-form-item label="价格"
                          prop="price"
                          class="form-item">
              <el-input v-model="datas.info.price"
                        maxlength="11"
                        type="number"
                        min="1"
                        minlength="1"
                        placeholder="请输入商品价格"></el-input>
            </el-form-item>
            <el-form-item label="原价"
                          class="form-item">
              <el-input v-model="datas.info.original_price"
                        maxlength="11"
                        type="number"
                        min="0"
                        minlength="1"
                        placeholder="请输入商品原价"></el-input>
            </el-form-item>
            <el-form-item label="进货价"
                          class="form-item">
              <el-input v-model="datas.info.factory_price"
                        maxlength="11"
                        type="number"
                        min="0"
                        minlength="1"
                        placeholder="请输入商品进货价"></el-input>
            </el-form-item>
            <el-form-item label="库存"
                          prop="stock"
                          class="form-item">
              <el-input v-model="datas.info.stock"
                        maxlength="11"
                        type="number"
                        min="0"
                        minlength="1"
                        placeholder="请输入商品库存"></el-input>
            </el-form-item>
            <el-form-item label="虚拟销量"
                          prop="virtual_sales"
                          class="form-item">
              <el-input v-model="datas.info.virtual_sales"
                        maxlength="11"
                        type="number"
                        min="0"
                        minlength="1"
                        placeholder="请输入商品库存"></el-input>
            </el-form-item>
            <el-form-item label="首页推荐"
                          prop="is_postage">
              <el-switch v-model="datas.info.is_recommend"
                         active-value="1"
                         inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="限制等级"
                          prop="is_vip">
              <el-switch v-model="datas.info.is_vip"
                         active-value="1"
                         inactive-value="0"></el-switch>
            </el-form-item>
             <el-form-item label="限制级别"
                          prop="vip_level" v-if="datas.info.is_vip==1">
              <el-select v-model="datas.info.vip_level"
                         placeholder="请选择限制的级别">
                <el-option key="1"
                           label="VIP"
                           value="1"></el-option>
                <el-option key="2"
                           label="SVIP"
                           value="2"></el-option>
                <el-option key="3"
                           label="县级"
                           value="3"></el-option>
                <el-option key="4"
                           label="市级"
                           value="4"></el-option>
                <el-option key="5"
                           label="省级"
                           value="5"></el-option>                                 
              </el-select>
            </el-form-item>
            <el-form-item label="限制数量"
                          prop="vip_num"
                          class="form-item"
                          v-if="datas.info.is_vip==1">
              <el-input v-model="datas.info.vip_num"
                        maxlength="11"
                        type="number"
                        min="0"
                        minlength="1"
                        placeholder="请输入限制购买的数量"></el-input>
            </el-form-item>
            <el-form-item label="是否包邮"
                          prop="is_postage">
              <el-switch v-model="datas.info.is_postage"
                         active-value="1"
                         inactive-value="2"></el-switch>
            </el-form-item>
            <el-form-item label="邮费"
                          prop="postage"
                          class="form-item"
                          v-if="datas.info.is_postage!=1">
              <el-input v-model="datas.info.postage"
                        maxlength="11"
                        type="number"
                        min="0"
                        minlength="1"
                        placeholder="请输入邮费"></el-input>
            </el-form-item>
            <el-form-item label="状态"
                          prop="status">
              <el-switch v-model="datas.info.status"
                         active-value="1"
                         inactive-value="2"></el-switch>
            </el-form-item>
            <el-form-item label="排序"
                          prop="sort"
                          class="form-item">
              <el-input v-model="datas.info.sort"
                        maxlength="2"
                        type="number"
                        min="1"
                        minlength="1"
                        placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item label="列表图"
                          prop="img"
                          class="form-item">
              <el-upload class="upload-demo"
                         ref="editUploads"
                         drag
                         :limit="1"
                         :auto-upload="true"
                         show-file-list
                         accept="image/*"
                         :on-success="infoUploadSuccess"
                         :on-error="infoUploadError"
                         :on-preview="infoUploadPreview"
                         list-type="picture"
                         :action="api.upload_img_url"
                         :file-list="datas.info.img_url"
                         :on-exceed="uploadExceed"
                         multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip"
                     slot="tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @click="saveInfo"
                         size="medium ">保 存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="商品详情"
                     :lazy="true"
                     :disabled="goods_id==''?true:false"
                     name="details">
          <editor-bar v-model="datas.details"
                      :isClear="isClear"
                      @change="detailsChange"></editor-bar>
          <el-button type="primary"
                     style="margin-top:15px;"
                     @click="saveDetails"
                     size="medium ">保 存</el-button>
        </el-tab-pane>

        <el-tab-pane label="商品图片"
                     :lazy="true"
                     :disabled="goods_id==''?true:false"
                     name="images">

          <div class="handle-box">
            <el-col :span="6">
              <el-button type="danger"
                         icon="el-icon-delete"
                         class="handle-del mr10"
                         @click="imagesDelAllSelection">批量删除</el-button>
              <el-button type="primary"
                         icon="el-icon-circle-plus-outline"
                         class="handle-del mr10"
                         @click="imagesHandleAdd">添加图片</el-button>
            </el-col>
            <el-col :span="12">
              <el-select v-model="imagesQuery.sort"
                         placeholder="排序"
                         class="handle-select mr10">
                <el-option key="1"
                           label="正序"
                           value="1"></el-option>
                <el-option key="2"
                           label="倒序"
                           value="2"></el-option>
              </el-select>
              <el-select v-model="imagesQuery.status"
                         placeholder="状态"
                         class="handle-select mr10">
                <el-option label="全部"
                           value=""></el-option>
                <el-option key="1"
                           label="正常"
                           value="1"></el-option>
                <el-option key="2"
                           label="禁用"
                           value="2"></el-option>
              </el-select>
              <el-button type="primary"
                         icon="el-icon-search"
                         @click="imagesHandleSearch">搜索</el-button>
            </el-col>
          </div>
          <div style="height:50px;width:100%;"></div>
          <el-table :data="imagesList"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="imagesHandleSelectionChange">
            <el-table-column type="selection"
                             width="55"
                             align="center"></el-table-column>
            <el-table-column prop="id"
                             label="ID"
                             width="70"
                             sortable
                             align="center"></el-table-column>
            <el-table-column label="图片"
                             align="center">
              <template slot-scope="scope">
                <el-image class="table-td-thumb"
                          :src="scope.row.img_url"
                          :preview-src-list="[scope.row.img_url]"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="排序"
                             prop="sort"
                             sortable="custom"></el-table-column>

            <el-table-column label="状态"
                             sortable
                             align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status==1?'success':'danger'">{{scope.row.status==1?'正常':'禁用'}}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="updated_at"
                             sortable
                             label="修改时间"></el-table-column>
            <el-table-column prop="created_at"
                             sortable
                             label="添加时间"></el-table-column>
            <el-table-column label="操作"
                             width="220"
                             fixed="right"
                             align="center">
              <template slot-scope="scope">
                <el-button type="text"
                           icon="el-icon-edit"
                           @click="imagesHandleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="text"
                           icon="el-icon-delete"
                           class="red"
                           @click="imagesHandleDel(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination background
                           layout="total, prev, pager, next"
                           :current-page="imagesQuery.page"
                           :page-size="imagesQuery.pageSize"
                           :total="imagesQuery.pageTotal"
                           @current-change="imagesHandlePageChange"></el-pagination>
          </div>

          <!-- 编辑图片列表弹出框 -->
          <el-dialog :title="editImagesWindowName"
                     v-dialogDrag
                     :visible.sync="editImagesVisible"
                     width="580px">
            <el-form ref="edit"
                     :model="datas.images"
                     label-width="70px">
              <el-form-item label="状态"
                            prop="status">
                <el-switch v-model="datas.images.status"
                           active-value="1"
                           inactive-value="2"></el-switch>
              </el-form-item>
              <el-form-item label="排序"
                            class="form-item">
                <el-input v-model="datas.images.sort"
                          maxlength="30"
                          type="number"
                          minlength="2"
                          min="1"
                          placeholder="请输入排序"></el-input>
              </el-form-item>
              <el-form-item label="上传图片">
                <el-upload class="upload-demo"
                           ref="editUploads"
                           drag
                           :limit="1"
                           :auto-upload="true"
                           show-file-list
                           accept="image/*"
                           :on-success="editImagesUploadSuccess"
                           :on-error="infoUploadError"
                           :on-preview="editImagesUploadPreview"
                           list-type="picture"
                           :action="api.upload_img_url"
                           :file-list="datas.images.img_url&&datas.images.img_url!=''?[{name:'预览图',url:datas.images.img_url}]:[]"
                           :on-exceed="uploadExceed"
                           multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip"
                       slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
              <el-button @click="editImagesVisible = false">取 消</el-button>
              <el-button type="primary"
                         @click="saveEditImages">确 定</el-button>
            </span>
          </el-dialog>

        </el-tab-pane>

        <el-tab-pane label="商品规格"
                     :lazy="true"
                     :disabled="!goods_id||goods_id==''?true:false"
                     name="specs">
          <div class="handle-box">
            <el-col :span="6">
              <el-button type="danger"
                         icon="el-icon-delete"
                         class="handle-del mr10"
                         @click="delSpecsGroupAllSelection">批量删除</el-button>
              <el-button type="primary"
                         icon="el-icon-circle-plus-outline"
                         class="handle-del mr10"
                         @click="handleSpecsGroupAdd">添加规格组</el-button>
            </el-col>
            <el-col :span="12">
              <el-select v-model="specsGroupQuery.sort"
                         placeholder="排序"
                         class="handle-select mr10">
                <el-option key="1"
                           label="正序"
                           value="1"></el-option>
                <el-option key="2"
                           label="倒序"
                           value="2"></el-option>
              </el-select>
              <el-select v-model="specsGroupQuery.status"
                         placeholder="状态"
                         class="handle-select mr10">
                <el-option label="全部"
                           value=""></el-option>
                <el-option key="1"
                           label="正常"
                           value="1"></el-option>
                <el-option key="2"
                           label="禁用"
                           value="2"></el-option>
              </el-select>
              <el-input v-model="specsGroupQuery.name"
                        placeholder="规格组名称"
                        class="handle-input mr10"></el-input>
              <el-button type="primary"
                         icon="el-icon-search"
                         @click="handleSpecsGroupSearch">搜索</el-button>
            </el-col>
          </div>
          <div style="height:50px;width:100%;"></div>
          <el-table :data="specsGroupList"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="specsGroupHandleSelectionChange">
            <el-table-column type="selection"
                             width="55"
                             align="center"></el-table-column>
            <el-table-column prop="id"
                             label="ID"
                             width="70"
                             sortable
                             align="center"></el-table-column>
            <el-table-column label="名称"
                             prop="name"></el-table-column>
            <el-table-column label="排序"
                             prop="sort"
                             sortable="custom"></el-table-column>

            <el-table-column label="状态"
                             sortable
                             align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status==1?'success':'danger'">{{scope.row.status==1?'正常':'禁用'}}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="updated_at"
                             sortable
                             label="修改时间"></el-table-column>
            <el-table-column prop="created_at"
                             sortable
                             label="添加时间"></el-table-column>
            <el-table-column label="操作"
                             width="220"
                             fixed="right"
                             align="center">
              <template slot-scope="scope">
                <el-button type="text"
                           icon="el-icon-lx-tag"
                           @click="handleGetSpecsList(scope.$index, scope.row)">规格</el-button>
                <el-button type="text"
                           icon="el-icon-edit"
                           @click="handleSpecsGroupEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="text"
                           icon="el-icon-delete"
                           class="red"
                           @click="specsGroupHandleDel(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination background
                           layout="total, prev, pager, next"
                           :current-page="specsGroupQuery.page"
                           :page-size="specsGroupQuery.pageSize"
                           :total="specsGroupQuery.pageTotal"
                           @current-change="specsGroupHandlePageChange"></el-pagination>
          </div>
          <!-- 编辑规格组弹出框 -->
          <el-dialog :title="editGroupSpecsWindowName"
                     v-dialogDrag
                     :visible.sync="editGroupSpecsVisible"
                     width="580px">
            <el-form ref="edit"
                     :model="datas.specsGroup"
                     label-width="70px">
              <el-form-item label="名称"
                            class="form-item">
                <el-input v-model="datas.specsGroup.name"
                          maxlength="30"
                          minlength="2"
                          placeholder="请输入规格组名称"></el-input>
              </el-form-item>
              <el-form-item label="状态"
                            prop="status">
                <el-switch v-model="datas.specsGroup.status"
                           active-value="1"
                           inactive-value="2"></el-switch>
              </el-form-item>
              <el-form-item label="排序"
                            class="form-item">
                <el-input v-model="datas.specsGroup.sort"
                          maxlength="30"
                          type="number"
                          minlength="2"
                          min="1"
                          placeholder="请输入排序"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
              <el-button @click="editGroupSpecsVisible = false">取 消</el-button>
              <el-button type="primary"
                         @click="saveEditGroupSpecs">确 定</el-button>
            </span>
          </el-dialog>

          <el-dialog title="规格列表"
                     v-dialogDrag
                     append-to-body
                     :visible.sync="SpecsListVisible"
                     width="960px"
                     height="600px">
            <div class="handle-box">
              <el-button type="danger"
                         icon="el-icon-delete"
                         class="handle-del mr10"
                         @click="delSpecsAllSelection">批量删除</el-button>
              <el-button type="primary"
                         icon="el-icon-circle-plus-outline"
                         class="handle-del mr10"
                         @click="handleSpecsAdd">添加规格</el-button>
            </div>
            <div style="height:50px;width:100%;"></div>
            <el-table :data="specsList"
                      border
                      class="table"
                      ref="multipleTable"
                      header-cell-class-name="table-header"
                      @selection-change="specsHandleSelectionChange">
              <el-table-column type="selection"
                               width="55"
                               align="center"></el-table-column>

              <el-table-column label="名称"
                               prop="name"></el-table-column>
              <el-table-column label="价格"
                               sortable
                               prop="price"></el-table-column>
              <el-table-column label="排序"
                               prop="sort"
                               sortable="custom"></el-table-column>

              <el-table-column label="状态"
                               sortable
                               align="center">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.status==1?'success':'danger'">{{scope.row.status==1?'正常':'禁用'}}</el-tag>
                </template>
              </el-table-column>

              <el-table-column prop="updated_at"
                               sortable
                               label="修改时间"></el-table-column>
              <el-table-column prop="created_at"
                               sortable
                               label="添加时间"></el-table-column>
              <el-table-column label="操作"
                               width="220"
                               fixed="right"
                               align="center">
                <template slot-scope="scope">
                  <el-button type="text"
                             icon="el-icon-edit"
                             @click="handleSpecsEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button type="text"
                             icon="el-icon-delete"
                             class="red"
                             @click="specsHandleDel(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination background
                             layout="total, prev, pager, next"
                             :current-page="specsQuery.page"
                             :page-size="specsQuery.pageSize"
                             :total="specsQuery.pageTotal"
                             @current-change="specsHandlePageChange"></el-pagination>
            </div>
            <!-- 编辑规格弹出框 -->
            <el-dialog :title="editSpecsWindowName"
                       v-dialogDrag
                       :modal="false"
                       :visible.sync="editSpecsVisible"
                       width="580px">
              <el-form ref="edit"
                       :model="datas.specs"
                       label-width="70px">
                <el-form-item label="名称"
                              class="form-item">
                  <el-input v-model="datas.specs.name"
                            maxlength="30"
                            minlength="2"
                            placeholder="请输入规格名称"></el-input>
                </el-form-item>
                <el-form-item label="价格"
                              class="form-item">
                  <el-input v-model="datas.specs.price"
                            maxlength="30"
                            type="number"
                            minlength="2"
                            min="1"
                            placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="状态"
                              prop="status">
                  <el-switch v-model="datas.specs.status"
                             active-value="1"
                             inactive-value="2"></el-switch>
                </el-form-item>
                <el-form-item label="排序"
                              class="form-item">
                  <el-input v-model="datas.specs.sort"
                            maxlength="30"
                            type="number"
                            minlength="2"
                            min="1"
                            placeholder="请输入排序"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer"
                    class="dialog-footer">
                <el-button @click="editSpecsVisible = false;SpecsListVisible=true;">取 消</el-button>
                <el-button type="primary"
                           @click="saveEditSpecs">确 定</el-button>
              </span>
            </el-dialog>

          </el-dialog>

        </el-tab-pane>

      </el-tabs>

    </div>

    <!-- 预览图片 -->
    <div class="previews"
         @click="closePreviews"
         v-if="windowsPopVisible">
      <img :src="windowsPopUrl"
           title="点击即可关闭预览">
    </div>

  </div>
</template>

<script>
import EditorBar from '../../common/wangEnduit';
export default {
  components: { EditorBar },
  name: 'seckill-info',

  data () {
    return {
      isClear: false,
      windowsPopVisible: false,
      windowsPopUrl: '',
      tabIndex: 0,
      tabIndexName: 'info',
      goods_id: '',
      date_time: '',
      datas: {
        info: {
          is_recommend: '0',
          status: '1',
          sort: 10,
          is_recommend: '0',
          name: '',
          img: '',
          price: 0.0,
          brokerage_type: '1',
          second_money: '',
          stair_money: '',
          stock: 1,
          is_postage: '1',
          img_url: [],
          postage: 0,
          virtual_sales: 0,
           is_vip:'0',
          vip_level:'',
          vip_num:'0',
          integral: 0,
          guide_id: '',
          describe: '',
          goods_no: '',
          original_price: 0,
          factory_price: 0,
          plate_id: '',
          category_id: '',
          category_arr: [],
          time_start: '',
          time_end: ''
        },
        images: {
          sort: 10,
          status: '1',
          img: '',
          img_url: ''
        },
        details: '',
        specsGroup: {
          sort: 10,
          status: '1',
          name: ''
        },
        specs: {
          name: '',
          status: '1',
          sort: 10,
          price: 0
        }
      },
      rules: {
        info: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '请输入排序', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'blur' }
          ],
          img: [
            { required: true, message: '请上传列表图', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入商品价格', trigger: 'blur' }
          ],
          stock: [
            { required: true, message: '请输入商品库存', trigger: 'blur' }
          ],
          is_postage: [
            { required: true, message: '请选择是否包邮', trigger: 'blur' }
          ],
          postage: [
            { required: true, message: '请输入邮费', trigger: 'blur' }
          ]
        },

      },
      plateList: [],
      categoryList: [],
      specsGroupList: [],
      imagesList: [],
      editImagesVisible: false,
      editImagesWindowName: '添加图片',
      editGroupSpecsVisible: false,
      SpecsListVisible: false,
      specsList: [],
      guideList: [],
      getGoodsId () {
        return this.$route.query.goods_id && this.$route.query.goods_id != null ? this.$route.query.goods_id : '';
      },
      imagesQuery: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
        status: '',
        sort: '1',
        multipleSelection: []
      },
      editGroupSpecsWindowName: '添加规格组',
      specsGroupQuery: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
        name: '',
        status: '',
        sort: '1',
        multipleSelection: []
      },
      editSpecsWindowName: '添加规格',
      editSpecsVisible: false,
      specsQuery: {
        multipleSelection: [],
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      /***
       * 获取商品图片列表
       */
      getImagesList () {
        let that = this;
        if (that.getGoodsId() == '') {
          return false;
        }
        that.imagesQuery.goods_id = that.getGoodsId();
        that.api.getGoodsImages(that.imagesQuery, function (data) {
          that.imagesList = data.list;
          that.imagesQuery.pageTotal = data.pageTotal;
        });
      },

      /***
       * 删除图片列表
       */
      delGoodsImages (ids, msg) {
        let that = this;
        if (!ids || ids.length < 1) {
          this.$message.error('请选择删除的数据');
          return false;
        }
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          that.api.delGoodsImages(ids, function (response) {
            that.imagesQuery.multipleSelection = [];
            that.imagesQuery.page = 1;
            that.getImagesList();
            that.$message.success(msg);
          });
        }).catch(() => { });
      },

      /***
       * 获取规格组列表
       */
      getSpecsGroupList () {
        let that = this;
        if (!that.getGoodsId() == '') {
          return false;
        }
        that.specsGroupQuery.goods_id = that.getGoodsId();
        that.api.getGoodsGroupSpecs(that.specsGroupQuery, function (data) {
          that.specsGroupList = data.list;
          that.specsGroupQuery.pageTotal = data.pageTotal;
        });
      },



      /***
       * 获取规格列表
       */
      getGoodsSpecs () {
        let that = this;
        if (this.that.getGoodsId() == '') {
          return false;
        }
        that.specsGroupQuery.goods_id = that.getGoodsId();
        that.api.getGoodsSpecs(that.specsQuery, function (data) {
          that.specsList = data.list;
          that.SpecsListVisible = true;
          that.specsQuery.pageTotal = data.pageTotal;
        });
      },

      /***
       * 删除规格
       */
      delGoodsSpecs (ids, msg) {
        let that = this;
        if (!ids || ids.length < 1) {
          this.$message.error('请选择删除的数据');
          return false;
        }
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          that.api.delGoodsSpecs(ids, function () {
            that.specsQuery.multipleSelection = [];
            that.specsQuery.page = 1;
            that.getGoodsSpecs();
            that.$message.success(msg);
          });
        }).catch(() => { });

      },



      /***
       * 批量删除规格组
       */
      delSpecsGroup (ids, msg) {
        let that = this;
        if (!ids || ids.length < 1) {
          this.$message.error('请选择删除的数据');
          return false;
        }
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          that.api.delGoodsGroupSpecs(ids, function (response) {
            that.specsGroupQuery.multipleSelection = [];
            that.specsGroupQuery.page = 1;
            that.getSpecsGroupList();
            that.$message.success(msg);
          });
        }).catch(() => { });
      },

      /***
       * 添加编辑商品图片
       */
      editGoodsImages () {
        let that = this;
        that.datas.images.goods_id = that.getGoodsId();
        that.api.editGoodsImages(that.datas.images, function () {
          that.getImagesList();
          that.editImagesVisible = false;
          that.$message.success('保存成功');
        });
      },
      /***
       * 获取商品基本信息
       */
      getGoodsInfo () {
        let that = this;
        let flag = that.getGoodsId() == '';

        this.goods_id = that.getGoodsId();
        let name = !flag ? '添加秒杀' : '编辑秒杀';
        document.getElementsByTagName('title')[0].innerHTML = name + ' | U品';
        if (flag) {
          this.goods_id = '';
          this.datas.info = { sort: 10, name: '' };
          this.datas.images = {};
          this.datas.specs = {};
          this.datas.specsGroup = {};
          return false;
        } else {
          this.goods_id = this.getGoodsId();
        }
        this.getImagesList();
        this.getSpecsGroupList();
        this.api.getGoodsSeckillInfo(this.goods_id, function (data) {
          that.windowsPopUrl = data.img_url;
          data.img_url = [{ name: '预览图', url: data.img_url }];
          data.status = data.status + '';
          data.details = data.details == ' ' ? '' : data.details;
          that.datas.details = data.details;
          data.is_postage = data.is_postage + '';
          that.datas.info = data;
          that.date_time = [data.time_start, data.time_end];
        });
      }
    }

  },
  watch: {
    $route: {
      handler: function (val, oldVal) {

        if (val.name == 'seckill-info') {
          this.getGoodsInfo();
        }

      },
      deep: true
    },
    date_time (val) {
      if (!val || val == null) {
        this.datas.info.time_start = '';
        this.datas.info.time_end = '';
      } else {
        this.datas.info.time_start = val[0];
        this.datas.info.time_end = val[1];
      }
    }
  },
  created () {
    this.getGoodsInfo();
  },
  methods: {
    /**
     * tab选择事件
     */
    handleClick (tab, event) {
      this.tabIndex = tab.index;
    },

    /***
     * 获取规格列表
     */
    handleGetSpecsList (index, row) {
      this.specsQuery.group_id = row.id;
      this.getGoodsSpecs();
    },

    /***
      * 规格分页事件
      */
    specsHandlePageChange (val) {
      this.specsQuery.page = val;
      this.getGoodsSpecs();
    },

    /***
     * 规格选择事件
     */
    specsHandleSelectionChange (val) {
      this.specsQuery.multipleSelection = val;
    },

    /***
     * 规格编辑事件
     */
    handleSpecsEdit (index, row) {
      this.editSpecsWindowName = '编辑规格';
      this.datas.specs = row;
      this.editSpecsVisible = true;
    },

    /***
     * 批量删除规格事件
     */
    delSpecsAllSelection () {
      let multipleSelection = this.specsQuery.multipleSelection;
      const length = multipleSelection.length;
      let str = '';
      let ids = [];
      for (let i = 0; i < length; i++) {
        str += multipleSelection[i].name + ' ';
        ids.push(multipleSelection[i].id);
      }
      this.delGoodsSpecs(ids, `删除了${str}`);
    },

    /***
     * 添加规格事件
     */
    handleSpecsAdd () {
      this.datas.specs = {
        name: '',
        status: '1',
        sort: 10,
        price: 0,
        group_id: this.specsQuery.group_id
      };
      this.editSpecsWindowName = '添加规格';
      this.editSpecsVisible = true;
    },

    /***
     * 规格删除事件
     */
    specsHandleDel (index, row) {
      this.delGoodsSpecs([row.id], '删除成功');
    },

    /***
     * 添加规格事件
     */
    saveEditSpecs () {
      let that = this;
      that.datas.specs.group_id = this.specsQuery.group_id;
      if (that.datas.specs.id && that.datas.specs.id != '') {
        that.api.editGoodsSpecs(that.datas.specs, function () {
          that.getGoodsSpecs();
          that.editSpecsVisible = false;
          that.$message.success('保存成功');
        });
        return false;
      }
      that.api.addGoodsSpecs(that.datas.specs, function () {
        that.getGoodsSpecs();
        that.editSpecsVisible = false;
        that.$message.success('保存成功');
      });
    },


    /***
     * 规格组切换页面事件
     */
    specsGroupHandlePageChange (val) {
      this.specsGroupQuery.page = val;
      this.getSpecsGroupList();
    },

    /***
     * 规格组搜索事件
     */
    handleSpecsGroupSearch () {
      this.getSpecsGroupList();
    },

    /***
     * 规格组选择事件
     */
    specsGroupHandleSelectionChange (val) {
      this.specsGroupQuery.multipleSelection = val;
    },

    /***
     * 删除规格组
     */
    specsGroupHandleDel (index, row) {
      this.delSpecsGroup([row.id], '删除成功');
    },

    /***
     * 规格组批量删除事件
     */
    delSpecsGroupAllSelection () {
      let multipleSelection = this.specsGroupQuery.multipleSelection;
      const length = multipleSelection.length;
      let str = '';
      let ids = [];
      for (let i = 0; i < length; i++) {
        str += multipleSelection[i].name + ' ';
        ids.push(multipleSelection[i].id);
      }
      this.delSpecsGroup(ids, `删除了${str}`);
    },

    /***
     * 规格组添加事件
     */
    handleSpecsGroupAdd () {
      this.editGroupSpecsWindowName = '添加规格组';
      this.datas.specsGroup = {
        sort: 10,
        status: '1',
        name: ''
      };
      this.editGroupSpecsVisible = true;
    },

    /***
     * 规格组编辑事件
     */
    handleSpecsGroupEdit (index, row) {
      this.editGroupSpecsWindowName = '编辑规格组';
      this.datas.specsGroup = row;
      this.editGroupSpecsVisible = true;
    },

    /***
     * 规格组保存事件
     */
    saveEditGroupSpecs () {
      let that = this;
      that.datas.specsGroup.goods_id = this.goods_id;
      if (that.datas.specsGroup.id && that.datas.specsGroup.id != '') {
        that.api.editGoodsGroupSpecs(that.datas.specsGroup, function () {
          that.getSpecsGroupList();
          that.editGroupSpecsVisible = false;
          that.$message.success('保存成功');
        });
        return false;
      }
      that.api.addGoodsGroupSpecs(that.datas.specsGroup, function (response) {
        that.getSpecsGroupList();
        that.editGroupSpecsVisible = false;
        that.$message.success('保存成功');
      });
    },

    /***
     * 图片列表搜索事件
     */
    imagesHandleSearch () {
      this.getImagesList();
    },

    /***
     * 图片列表编辑事件
     */
    imagesHandleEdit (index, row) {
      console.log(row)
      this.datas.images = row;
      this.editImagesVisible = true;
      this.editImagesWindowName = '编辑图片';
    },
    /***
     * 图片列表添加事件
     */
    imagesHandleAdd () {
      this.editImagesWindowName = '添加图片';
      this.editImagesVisible = true;
      this.datas.images = {
        sort: 10,
        status: '1',
        img_url: ''
      };
    },

    /***
     * 图片列表保存事件
     */
    saveEditImages () {
      this.editGoodsImages();
    },


    /***
     * 图片列表上传成功事件
     */
    editImagesUploadSuccess (response, file, fileList) {
      if (response.code != 1000) {
        this.$message.error(response.msg);
        return false;
      }
      this.datas.images.img = response.data.path;
      this.datas.images.img_url = response.data.url;
    },

    /***
     * 图片列表预览上传图片事件
     */
    editImagesUploadPreview (file) {
      this.windowsPopVisible = true;
      this.windowsPopUrl = file.url;
    },

    /***
     * 图片列表多选操作
     */
    imagesHandleSelectionChange (val) {
      this.imagesQuery.multipleSelection = val;
    },

    /***
     * 图片列表分页事件
     */
    imagesHandlePageChange (val) {
      this.imagesQuery.page = val;
      this.getImagesList();
    },

    /***
     * 图片列表删除事件
     */
    imagesHandleDel (index, row) {
      this.delGoodsImages([row.id], '删除成功');
    },

    /***
     * 图片列表批量删除事件
     */
    imagesDelAllSelection () {
      let multipleSelection = this.imagesQuery.multipleSelection;
      const length = multipleSelection.length;
      let ids = [];
      for (let i = 0; i < length; i++) {
        ids.push(multipleSelection[i].id);
      }
      this.delGoodsImages(ids, `删除了${ids.length}张图片`);
    },

    /***
     * 超出上传限制事件
     */
    uploadExceed () {
      this.$message.error('只能上传一张图片');
    },

    /***
     * 添加预览
     */
    infoUploadPreview (file) {
      this.windowsPopVisible = true;
      this.windowsPopUrl = file.url;
    },

    /***
     * 关闭预览
     */
    closePreviews () {
      this.windowsPopVisible = false;
    },

    /***
     * 添加上传成功事件
     */
    infoUploadSuccess (response, file, fileList) {
      if (response.code != 1000) {
        this.$message.error(response.msg);
        return false;
      }
      this.datas.info.img = response.data.path;
      this.datas.info.img_url = [{ name: '预览', url: response.data.url }];
    },
    /***
     * 添加上传失败事件
     */
    infoUploadError (response, file, fileList) {
      this.$message.error('上传失败');
    },

    /***
     * 移除编辑上传文件
     */
    editRemoveUpload (file, fileList) {
      this.data.info.img = '';
    },

    /***
     * 保存基本属性事件
     */
    saveInfo () {
      let that = this;
      this.$refs['infoForm'].validate((valid) => {
        if (valid) {
          if (that.getGoodsId() != '') {
            that.datas.info.id = that.goods_id;
            that.api.editGoodsSeckill(that.datas.info, function () {
              that.$message.success('保存成功');
              that.getGoodsInfo();
            });
            return false;
          }
          that.api.addGoodsSeckill(that.datas.info, function (data) {
            that.$message.success('保存成功');
            that.goods_id = data.id;
            that.$router.push({
              name: 'seckill-info',
              query: { goods_id: data.id }
            });
            that.$route.query.goods_id = data.id;
            that.$cookies.set('goodsSonskId', that.goods_id);
            that.getImagesList();
            that.getGoodsInfo();
          });
        }
      });
    },

    /***
     * 保存详情事件
     */
    saveDetails () {
      let that = this;
      that.api.editGoodsDetails({ id: this.goods_id, details: this.datas.details }, function () {
        that.$message.success('保存成功');
      });
    },

    /**
     * 返回上一页
     */
    goBack (index, row) {
      this.$router.push({
        name: `seckill`
      });
      let theWindow = document.getElementsByClassName('seckill-info');
      if (theWindow && theWindow.length > 0) {
        theWindow[0].click();
      }
    },
    /***
  * 富文本改变事件
  */
    detailsChange (val) {
      this.datas.details = val;
    },
  },

};
</script>

<style scoped>
.handle-select {
    width: 120px;
}
.form-item {
    width: 285px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.form-item {
    width: 380px;
}
.previews {
    display: flex;
    flex-flow: nowrap row;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 9999999999;
    background: rgba(0, 0, 0, 0.3);
    justify-content: center;
    align-items: center;
}
.previews > img {
    max-width: 90%;
    max-height: 90%;
}
.el-image-viewer__close {
    color: #ffffff;
}
.go-back {
    cursor: pointer;
}
.go-back:hover {
    color: cornflowerblue;
}
.standard {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: nowrap row;
    align-items: center;
}
.standard > div {
    margin-right: 5px;
}
</style>
